<route lang="json5">
	{
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '讨论组列表',
	enablePullDownRefresh: false,
	"app-plus": {
	"bounce": "none"
	}
	},
	}
</route>
<template>
	<view class="page">
		<NavBar>
			<template v-slot:left>
				<text class="iconfont icon-fanhui back"></text>
			</template>
			<template v-slot:title>
				讨论组列表
			</template>
			<template v-slot:right>
				<text class="iconfont icon-gengduo" @click="visible = true"></text>
			</template>
		</NavBar>
		<view class="body">
			<scroll-view scroll-y="true" :refresher-triggered="triggered" refresher-enabled="true"
				:refresher-threshold="80" refresher-background="#f1f1f1" @scrolltolower="onReachLower"
				@refresherrefresh="onRefresh" @refresherrestore="onRestore">
				<view class="card" v-for="item in chatList" :key="item.id" @click="toChat(item)">
					<view class="info">
						<view class="header">
							<view class="title">
								<block v-if="item.modules">[{{item.modules}}]</block>{{item.chatName}}
							</view>
							<view class="time">{{item.time}}</view>
						</view>
						<view class="users">
							{{item.remark}}
						</view>
						<view class="users">
							{{item.users}}
						</view>
					</view>
					<view v-if="item.unreadNum" class="unread" :class="[item.unreadNum > 99 ? 'more' : '']">
						{{ item.unreadNum > 99 ? '99+' : item.unreadNum }}
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="th-dialog" :class="[visible?'show':'']">
			<view class="search-panel">
				<view class="input">
					<text class="iconfont icon-sousuo1"></text>
					<input class="uni-input" :value="keyWrord" placeholder="搜索" @input="inputHandle"
						confirm-type="search" @confirm="searchHandle" />
				</view>
				<text @click="cancelHandle">取消</text>
			</view>
			<view class="result" v-if="searchList.length">
				<view class="title">搜索结果</view>
				<view class="wrap">
					<view class="card" v-for="item in searchList" :key="item.id" @click="toChat(item)">
						<view class="info">
							<view class="header">
								<view class="title">{{item.chatName}}</view>
								<view class="time">{{item.time}}</view>
							</view>
							<view class="users">
								{{item.remark}}
							</view>
							<view class="users">
								{{item.users}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else class="no-result">没有搜索结果</view>
		</view>
	</view>
</template>

<script>
	import NavBar from './components/navBar.vue'
	import dayjs from 'dayjs'
	import "dayjs/locale/zh-cn"
	dayjs.locale('zh-cn')
	import {
		getChatList
	} from '@/service/chat'
	export default {
		components: {
			NavBar
		},
		data() {
			return {
				user: JSON.parse(uni.getStorageSync('app_userCode')),
				visible: false,
				chatList: [],
				searchList: [],
				_freshing: false,
				triggered: false,
				param: {
					page: 1,
					size: 50
				},
				haveMore: true,
				params: {
					size: 2000,
					page: 1
				},
				keyWrord: ''
			}
		},
		methods: {
			toChat(item) {
				const {
					chatName,
					id
				} = item;
				uni.navigateTo({
					url: `/pages/chat/index?chatId=${id}`
				})

				item.unreadNum = 0;
			},
			getData(param) {
				return new Promise((resolve) => {
					setTimeout(() => {
						resolve(true)
						const res = {
							data: {
								list: [1, 2, 3]
							}
						}
						// 还有数据
						if (res.data.length < param.size) {
							this.haveMore = false;
						} else {
							this.haveMore = true;
							this.param.page += 1;
						}

						this.chatList = [...this.chatList, ...[res.data.list]]
					}, 1000)
				})
			},
			onReachLower() {
				if (!this.haveMore) return;
				console.log('底部');
			},
			resetParam() {
				this.param.page = 1;
				this.chatList = [];
				this.haveMore = true;
			},
			async onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.triggered = true;
				// 请求数据
				this.resetParam();
				await this.getChatListHandle();

				this.triggered = false;
				this._freshing = false;
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			formatTime(val) {
				const today = dayjs().format('YYYY-MM-DD');
				const [t1, t2] = val.split(' ');
				if (t1 === today) {
					return dayjs(val).format('HH:mm');
				} else if (dayjs(t1).add(1, 'day').format('YYYY-MM-DD') === t1) {
					return '昨天'
				} else {
					return dayjs(t1).format('MM月DD日');
				}
			},
			getChatListHandle() {
				return new Promise((resolve) => {
					getChatList(this.params).then(res => {
						if (res.code === 0) {
							this.chatList = res.data.records.map(item => {
								item.users = item.userList.filter(user => user.userName).map(
									user => user
									.userName).join('、');
								if (item.lastDate) {
									item.time = this.formatTime(item.lastDate);
								}
								return item;

							});
							resolve(true)
						}
						resolve(false)
					})
				}).catch(err => {
					resolve(false)
				})

			},
			receiveMsg(msg) {
				if (msg.senderCode !== this.user.value) {
					const index = this.chatList.findIndex(chat => chat.id === msg.chatId);
					const chat = this.chatList[index];
					chat.unreadNum = chat.unreadNum ? chat.unreadNum + 1 : 1;
					chat.time = this.formatTime(msg.date);
					this.chatList.splice(index, 1);
					this.chatList.unshift(chat)
				}
			},
			revokeMsg(msg) {
				const matchChat = this.chatList.find((item) => item.id === msg.chatId);
				if (matchChat) {
					matchChat.unreadNum = matchChat.unreadNum < 1 ? 0 : matchChat.unreadNum - 1;
				}
			},
			inputHandle(e) {
				const key = e.detail.value.trim();
				this.keyWrord = key;
			},
			searchHandle() {
				if (!this.keyWrord) {
					this.searchList = [];
					return;
				}
				this.searchList = this.chatList.filter((chat) => {
					return chat.chatName?.indexOf(this.keyWrord) > -1;
				});
			},
			cancelHandle() {
				this.visible = false;
				this.keyWrord = '';
				this.searchList = []
			}
		},
		onShow() {
			uni.$off('sseMsg');
			uni.$on('sseMsg', (msg) => {
				this.receiveMsg(msg);
			})

			uni.$off('revokeMsg');
			uni.$on('revokeMsg', (msg) => {
				this.revokeMsg(msg)
			})

			uni.$off('resetList');
			uni.$on('resetList', (ref) => {
				const matchChat = this.chatList.find((item) => item.id === ref.id);
				matchChat.chatName = ref.chatName;
				matchChat.remark = ref.remark;
				matchChat.users = ref.userList.filter(user => user.userName).map(
					user => user
					.userName).join('、');
			})

		},
		onLoad() {
			this.getChatListHandle();

			uni.$on('receive', (msg) => {
				this.receiveMsg(msg);
			})

			uni.$on('revoke', (msg) => {
				this.revokeMsg(msg)
			})
		},
		onUnload() {
			uni.$off('sseMsg');
			uni.$off('revokeMsg');
			uni.$off('receive');
			uni.$off('revoke');
		}
	}
</script>

<style lang="scss" scoped>
	@import url('@/static/iconfont/iconfont.css');

	.page {
		height: 100vh;
		display: flex;
		font-size: 32rpx;
		flex-direction: column;
	}

	.back {
		font-size: 40rpx;
	}

	.search {
		font-size: 40rpx;
		margin-right: 15rpx;
	}

	.body {
		flex: 1;
		height: 0;

		scroll-view {
			height: 100%;
		}
	}

	.card {
		border-bottom: 1rpx solid #e6e6e6;
		padding: 30rpx 25rpx;
		align-items: center;
		background: #fff;
		position: relative;

		.face {
			position: relative;
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
			border: 1rpx solid #f1f1f1;
			margin-right: 20rpx;

			.budge {
				position: absolute;
				width: 15rpx;
				height: 15rpx;
				top: -7rpx;
				left: -7rpx;
				background: red;
				border-radius: 50%;
			}
		}

		.info {
			.header {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.title {
					flex: 1;
					font-size: 36rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}

				.time {
					width: 130rpx;
					text-align: right;
					font-size: 28rpx;
					color: #999;
				}
			}

			.users {
				margin-top: 10rpx;
				color: #999;
				font-size: 28rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}

		.unread {
			position: absolute;
			top: 3rpx;
			left: 3rpx;
			background: red;
			height: 18px;
			line-height: 18px;
			min-width: 18px;
			border-radius: 18px;
			color: #fff;
			text-align: center;
			font-size: 12px;

			&.more {
				padding: 0 5px;
			}
		}
	}

	.th-dialog {
		position: fixed;
		width: 100vw;
		height: 100vh;
		top: 0;
		left: 0;
		z-index: 99999;
		transition: all .5s;
		transform: translateY(-100%);
		opacity: 0;
		background: #fff;

		&.show {
			opacity: 1;
			transform: translateY(0);
		}

		.search-panel {
			display: flex;
			align-items: center;
			background: #f1f1f1;
			padding: var(--status-bar-height) 20rpx 0 20rpx;

			.input {
				display: flex;
				align-items: center;
				background: #fff;
				padding: 10rpx;
				margin-right: 15rpx;
				border-radius: 10rpx;
				flex: 1;
				margin: 15rpx;

				.uni-input {
					margin-left: 15rpx;
				}
			}
		}

		.result {
			background: #fff;
			padding: 20rpx;

			.title {
				padding: 10rpx 0;
			}

			.wrap {
				border-top: 1rpx solid #f1f1f1;
				border-bottom: 1rpx solid #f1f1f1;
				max-height: calc(100vh - 0rpx);
				overflow-y: scroll;

				.item {
					display: flex;
					align-items: center;
					background: #fff;

					.face {
						position: relative;
						width: 60rpx;
						height: 60rpx;
						border-radius: 10rpx;
						border: 1rpx solid #f1f1f1;
						margin-right: 20rpx;
					}

					.info {
						flex: 1;
						height: 100rpx;
						line-height: 100rpx;
						border-bottom: 1rpx solid #f1f1f1;
					}

					&:last-child {
						.info {
							border: none;
						}

					}
				}
			}

		}
	}

	.icon-fanhui,
	.icon-gengduo {
		font-size: 42rpx !important;
	}

	.no-result {
		text-align: center;
		color: #bfbfbf;
		padding: 30rpx;
	}
</style>